<template>
	<view class="">
		<u-tabs :list="tabs" active-color="#A8F88C" inactive-color="#FFFFFF" :is-scroll="false" :current="current" @change="change" bg-color="#000000"></u-tabs>
		<view class="rankprice" v-if="current==0">
			<view class="rank-item flex justify-between align-center" v-for="(item,index) in list" :key="index">
				<view class="flex align-center">
					<image :src="item.products_cover" mode="aspectFill" class="rank-avatar"></image>
					<view class="rank_text">
						<view class="size-30">{{item.class_name}}</view>
						<view class="size-24" style="color: #999999;padding-top: 10rpx;">{{item.rarity_type_name}}</view>
					</view>
				</view>
				<view class="rank-num">￥{{item.price}}</view>
			</view>
		</view>
		<view class="rankheat_item" v-if="current==1">
			<view class="ranknum flex justify-between align-center" v-for="(item,index) in list" :key="index">
				<view class="ranking-content-item-avatar">
					<template v-if="index < 3">
						<image :src="`/static/images/index/dark/top_${index + 1}.png`" class="ranking-content-item-avatar-mark" mode=""></image>
					</template>
					<template v-else>
						<text class="rankindex">{{ index + 1 }}</text>
					</template>
				</view>
				<view class="rank-item flex justify-between align-center" >
					<view class="flex align-center">
						<image :src="item.cover" mode="aspectFill" class="rank-avatar"></image>
						<view class="rank_text">
							<view class="size-30">{{item.class_name}}</view>
							<view class="size-20 rankcard" style="margin-top: 10rpx;">{{item.rarity_type_name}}</view>
						</view>
					</view>
					<view class="rank-num flex justify-between align-center">
						<image src="/static/images/index//dark/phhuo.png" mode=""></image>
						<view class="">{{item.view_num}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabs:[{
					name:'价格趋势'
				},{
					name:'作品热度'
				}],
				current:0,
				list:[]
			}
		},
		onLoad() {
			this.loadData()
		},
		methods:{
			loadData(){
				this.$u.api.pre_rank({
					type:this.current + 1
				}).then(res=>{
					this.list = res.data.list
				})
			},
			change(index) {
				this.current = index;
				this.loadData()
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100vw;
		height: 100vh;
		background-color: #000000;
	}
	.rankprice{
		width: 690rpx;
		margin: 30rpx;
		background-color: #171717;
		border-radius: 20rpx;
		.rank-item{
			height: 110rpx;
			padding: 0 26rpx;
			.rank-avatar{
				width: 90rpx;
				height: 90rpx;
				border-radius: 12rpx;
				margin: 20rpx;
			}
			.rank-num{
				color: #E21362;
				font-size: 40rpx;
				font-weight: bold;
			}
			.rank_text{
				color: #FFFFFF;
			}
		}
	}
	.rankheat_item{
		.ranknum{
			width: 100%;
			padding: 30rpx 30rpx 0 30rpx;
			.ranking-content-item-avatar{
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				.ranking-content-item-avatar-mark{
					width: 90rpx;
					height: 90rpx;
				}
			}
			.rankindex{
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			.rank-item{
				width: 600rpx;
				height: 120rpx;
				padding: 0 26rpx;
				border-radius: 20rpx;
				background-color: #171717;
				.rank-avatar{
					width: 90rpx;
					height: 90rpx;
					border-radius: 12rpx;
					margin: 20rpx;
				}
				.rank-num{
					color: #E21362;
					font-size: 32rpx;
					font-weight: bold;
					image{
						width: 24rpx;
						height: 28rpx;
						padding-right: 17rpx;
					}
				}
				.rank_text{
					color: #FFFFFF;
					.rankcard{
						width: 70rpx;
						height: 35rpx;
						line-height: 35rpx;
						color: #000000;
						font-weight: bold;
						text-align: center;
						font-style: italic;
						background-size: 100% 100%;
						background-image: url('/static/images/index/dark/phcard.png');
					}
				}
			}
		}
	}
</style>